<template>
  <view class="my-datepicker c999 fs22" mode="date">
    <picker class="start" mode="date" @change="changeStart">
      <view>{{ value ? value : '选择日期' }}</view>
    </picker>
    <uni-icons color="#999" class="icon" type="calendar"></uni-icons>
  </view>
</template>

<script>
export default {
  name: "my-datepicker",
  props: {
	value: '',
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    changeStart(e) {
	  this.$emit('update:value',e.detail.value)
	  this.$emit('change',e.detail.value)
    },
  },
}
</script>

<style lang="less">
.my-datepicker {
  box-sizing: border-box;
  width: 333.33rpx;
  height: 61.11rpx;
  background: #ffffff;
  border: 1.39rpx solid #d8d8d8;
  border-radius: 31.94rpx;
  position: relative;
  padding: 0 28rpx;

  .start {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 250rpx;

  }

  .start {
    left: 28rpx;
    text-align: left;
  }

  .icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translate(0, -50%);
    transition: all 0.3s;
  }
}
</style>